import {createStore} from './redux';
import $ from 'jquery';
import { useEffect } from 'react';

//为每一个状态定（起）义（一）一（个）个（名）类（字）型（吧）
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
/*
* reducer的作用是用来改变状态
* 这里主要是处理状态改变的要求，是对状态的处理部分
* 我们可以在这里加减等一系列的处理状态
* （state为旧值，action新的改变状态的动作）
* */
let reducer = (state = {number:0},action)=>{
    //为了判断第一次action没有传的情况，在redux中 *30行*
    //（当还没有调用状态改变的时候，state和action肯定没有值，为了防止报错）
    if(action == undefined)return state;
    //依据类型做出改变
    switch (action.type){
        case INCREASE:
            return {number:state.number+1};
        case DECREASE:
            return {number:state.number-1};
        default:
            return state;
    }

};
/*调用仓库返回*/
let store = createStore(reducer);


export default function () {
    useEffect(() => {
        let render = ()=>{
            $("#counter").html(store.getState().number);
        };    
        //将render订阅
        var unsubscribe = store.subscribe(render);
        //首次渲染
        render();
    },[])
    return (
        <div>
            <div id='counter'></div>
            <button id='increaseBtn' onClick={()=>{
                 store.dispatch({type:INCREASE});
            }}>增加</button>
            <button id='decreaseBtn' onClick={()=>{
                store.dispatch({type:DECREASE});
            }}>减少</button>
        </div>
    )
}